<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /*
            对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，而对象的属性没有次序。只和键相关

            语法：

            ```js
            //完整语法
            let {key2:变量1,key1:变量2,...} = {key1:val1,key2:val2,...};

            //简写语法 (变量名和键名相同可以简写)
            let {key2:key2,key1:key1} =   {key1:val1,key2:val2,...};
            let {key2,key1} =   {key1:val1,key2:val2,...};  
            ```
        */


        // 1.完整写法
        let {age:uage,name:uname,hobby:uhobby} = {name:"哈哈",age:100,hobby:"篮球"};
        console.log(uname,uage,uhobby);


        // 2.简写写法 (推介)
        // let  {name:name,hobby:hobby,age:age} = {name:"哈哈1",age:1000,hobby:"篮球1"};
        let  {name,hobby,age} = {name:"哈哈1",age:1000,hobby:"篮球1"};
        console.log(name,age,hobby);


        // 3.解构失败 
        // let {myname,myage,myhobby,mysex} = {myname:"哈哈11",myage:10001,myhobby:"篮球11"};
        // console.log(myname,myage,myhobby,mysex); //哈哈11 10001 篮球11 undefined

        
        
        let {myname,myhobby} = {myname:"哈哈11",myage:10001,myhobby:"篮球11"};
        console.log(myname,myhobby); //哈哈11 篮球11


        // 4.解构默认值
        let {username,userage=10,usersex='未知'} = {username:"哈哈",userage:100};
        console.log(username,userage,usersex);  //哈哈 100 未知
    </script>
</body>
</html>